<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-06-06 10:27:41
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-06-06 11:46:19
 * @FilePath: /amap-web-vr/src/components/vc-layer/layer-view.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
<div class="layer-view">
    <el-row class="layer-view__title">
        <el-col :span="12"><div>图层</div></el-col>
        <el-col :span="12"><div style="display: flex; align-items: center; justify-content: end;">
            <span style="margin-right: var(--margin);">详情</span>
            <el-switch v-model="layerStore.layer_detail" />
        </div></el-col>
    </el-row>
        <el-space wrap :size="5">
            <div v-for="layer in layerStore.layers" :key="layer.id" class="layer-view__card " @click="layerStore.onClickLayer(layer)"
                :class="{'active' : layerStore.current.id === layer.id}"
                >
                <span>{{layer.name}}</span>
            </div >
        </el-space>
    </div>
</template>

<script lang="ts" setup>
import {useLayerStore} from '@/stores/layer'
import {onMounted} from 'vue'
const layerStore = useLayerStore()
onMounted(() => {
    layerStore.loadData()
})


</script>

<style lang="scss" scoped>
.layer-view{
    height: 400px;
    overflow-y: scroll;
    &__title{
        height: 30px;
        line-height: 30px;
    }
    &__card{
        width: 70px;
        height: 45px;
        background: #f1f1f1;
        border-radius: var(--border-radius-xs);
        font-size: var(--font-size-xxs);
        display: flex;
        padding: var(--padding-sm);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
    }
    .active{
            background: var(--el-color-primary);
            color: #ffffff;
    }
}
</style>

